<template>
  <el-dialog v-model="isShowDialog"
             :before-close="handleClose"
             :title="title"
             draggable
             width="50%"
             append-to-body
  >

    <el-form :inline="true" :model="saveParams" ref="formRef" label-width="100px" :rules="rules">
      <div style="display: flex;flex-wrap: wrap">
        <el-col :span="12">
          <el-form-item label="模板名称" prop="configName">
            <el-input v-model="saveParams.configName" placeholder="模板名称" :disabled="isDefault" clearable/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
            <el-form-item label="模板尺寸" prop="width" style="width: 45%">
              <el-input v-model="saveParams.width" :disabled="isDefault" @input="saveParams.width=limitIntNumber(saveParams.width)" :maxlength="3"  placeholder="宽" clearable/>
            </el-form-item>
          <el-form-item  style="width: 10px">
           X
          </el-form-item>
            <el-form-item prop="height" style="width:25%">
               <el-input v-model="saveParams.height" :disabled="isDefault" @input="saveParams.height=limitIntNumber(saveParams.height)" :maxlength="3" placeholder="高" clearable/>
            </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="打印机">
            <el-select v-model="saveParams.printMachine" clearable placeholder="打印机">
              <template v-for="(item,index) in printNameList" :key="index">
                <el-option
                    :label="item"
                    :value="item"
                />
              </template>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="设为默认">
            <el-switch v-model="saveParams.status"  size="large" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="所属仓库" prop="warehouseId">
           <el-select
              :disabled="saveParams.printConfigId"
              clearable
              v-model="saveParams.warehouseId"
          >
            <template v-for="(item,index) in warehouseList" :key="index">
              <el-option :label="item.warehouseName" :value="item.warehouseId"></el-option>
            </template>
          </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item label="打印样式" style="width: 92%">
            <div style="width: 100%;display: flex;">
              <div :class="saveParams.printStyle==='1'?'styleDiv active':'styleDiv' " @click="clickStyle('1')">
                <span class="tem-col" v-if="saveParams.printStyle==='1'">默认模板</span>
                <img :src="Style1" style="width: 100%;">
              </div>
              <div :class="saveParams.printStyle==='2'?'styleDiv active':'styleDiv' " @click="clickStyle('2')">
                <span class="tem-col" v-if="saveParams.printStyle==='2'">默认模板</span>
                <img :src="Style2" style="width: 100%;">
              </div>
              <div :class="saveParams.printStyle==='3'?'styleDiv active':'styleDiv' " @click="clickStyle('3')">
                <span class="tem-col" v-if="saveParams.printStyle==='3'">默认模板</span>
                <img :src="Style3" style="width: 100%;">
              </div>
            </div>
          </el-form-item>
        </el-col>
      </div>

    </el-form>

    <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="clickSave"> 保存 </el-button>
          <el-button @click="handleClose">取消</el-button>
        </span>
    </template>

  </el-dialog>
</template>

<script setup>
import {getCurrentInstance, nextTick, onMounted, ref} from "vue";
import {limitIntNumber} from "@/utils/shuangcheng";
import {getLodop} from "@/assets/LodopFuncs";
import Style1 from "@/assets/images/style1.jpg"
import Style2 from "@/assets/images/style2.jpg"
import Style3 from "@/assets/images/style3.jpg"
import {savePrintConfig} from "@/api/scApi";
import {getWarehouseSelect} from "@/api/system/user";

const {proxy} = getCurrentInstance()
let saveParams = ref({
  printStyle:'1'
})
// 表单校验
const rules = ref({
  configName: [{required: true, message: "模板名称不能为空", trigger: "blur"}],
  width: [{required: true, message: "模板宽不能为空", trigger: "blur"}],
  height: [{required: true, message: "模板高不能为空", trigger: "blur"}],
  warehouseId: [{required: true, message: "所属仓库不能为空", trigger: "change"}],
});
const props = defineProps({
  isShowDialog: {
    type: Boolean,
    default: false
  },
  title: {type: String},
  detailData: {type: Object},
})
let isDefault=ref(false)//是否系统默认模板
const emits = defineEmits(['cancel'])
function handleClose() {
  emits('cancel')
}

let LODOP;
let printNameList=ref([]) //打印机集合
function getPrinterCount(){
  LODOP=getLodop();
  if(LODOP){
    //获取打印机个数
    let printNum= LODOP.GET_PRINTER_COUNT();
    for (let i = 0; i <printNum ; i++) {
      printNameList.value.push(LODOP.GET_PRINTER_NAME(i))
    }
  }
}

onMounted(()=>{
  getWarehouse()
  if(JSON.stringify(props.detailData) !='{}'){
    saveParams.value =props.detailData
    isDefault.value =saveParams.value.configType===0?true:false
  }
  setTimeout(()=>{
    LODOP=getLodop();
    getPrinterCount()
  },500)
})

function clickStyle(type){
  saveParams.value.printStyle= type;
}

function clickSave(){
  proxy.$refs.formRef.validate((valid, fileds) => {
    if (valid) {
      saveParams.value.printType =0
      saveParams.value.status=saveParams.value.status?0:1
      savePrintConfig(saveParams.value).then(res => {
        if (res.code === 200) {
          proxy.$modal.msgSuccess('保存成功')
          emits('cancel', true)
        }
      })
    }
  })
}

const sysUserInfo=JSON.parse(localStorage.getItem("userInfo"))
//获取仓库下拉数据
let warehouseList = ref([])
function getWarehouse(){
  return new Promise((resolve, reject) => {
    getWarehouseSelect({'companyId': sysUserInfo.companyId}).then(res => {
      warehouseList.value = res.data
      resolve()
    })
  })
}
</script>

<style scoped lang="scss">
.styleDiv{
  width: 30%;
  margin-left: 10px;
  cursor: pointer;
  border: 1px solid #eeeeee;
  border-radius: 8px;
  position: relative;
  overflow: hidden;
  text-align: center;
}

.tem-col{
  display: block;
  background-color: var(--el-color-primary);
  width: 68px;
  font-size: 12px;
  color: #FFFFFF;
  transform: rotate(-37deg);
  position: absolute;
  top: 2px;
  left: -17px;
  height: 23px;
}
.active{
  border-color:var(--el-color-primary) ;
}
</style>